<template>
    <div class="pay">
        <van-nav-bar title="确认订单" left-text="" left-arrow @click-left="onClickLeft" />
        <div class="addr_box" @click="choseAddr">
            <van-cell-group inset>
                <van-cell :title="address" :label="namePhone" icon="location-o" />
            </van-cell-group>
        </div>
        <div class="cart_msg">
            <van-cell-group inset>
                <van-card
                    v-for="item in orderList"
                    :num="item.num"
                    :price="item.s_good.sale_price || item.s_good.price"
                    :desc="item.s_good.desc"
                    :title="item.s_good.name"
                    :thumb="item.s_good.s_goods_photos[0].path"
                />
            </van-cell-group>
        </div>
        <div class="pay_msg">
            <van-cell-group inset>
                <van-cell title="价格明细" class="price" />
                <van-cell title="商品总数" :value="totalNum" />
                <van-cell title="邮费" value="包邮" />
            </van-cell-group>
        </div>
        <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit"></van-submit-bar>
    </div>
</template>

<script setup>
import { requestDel, requestGet, requestPost } from '@/utils/Request.js';
import { computed, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
const router = useRouter();
const route = useRoute();
const store = useStore();
const token = store.state.user.token;
let address = ref('');
let namePhone = ref('');
const orderList = store.state.cart.cartList;
let changedAddr = store.state.address.chosenAddrId;

const onClickLeft = () => {
    store.commit('changeRouterType', 'back');
    router.back();
};

let total = computed(() => orderList.reduce((sum, ele) => (sum += ele.total_price), 0));
let totalNum = computed(() => '共' + orderList.reduce((sum, ele) => (sum += ele.num), 0) + '件');

let addrDefault = {};

(async () => {
    if (!changedAddr) {
        let res = await requestGet('/defalutAddress', token);
        addrDefault = res.data.result;
    } else {
        addrDefault = store.state.address.addressList.find(ele => ele.id == changedAddr);
    }

    address.value = `${addrDefault.area_name} ${addrDefault.desc} ${addrDefault.area}`;
    namePhone.value = `${addrDefault.name} ${addrDefault.phone}`;
})();

const choseAddr = () => {
    store.commit('address/changeChosenAddr', addrDefault.id);
    router.push(`/address?redirct=/pay`);
};

const onSubmit = async () => {
    console.log(orderList);
    let data = [];
    let goodsId = [];
    let delId = [];
    orderList.forEach((ele, i) => {
        data[i] = {};
        data[i]['id'] = +ele.goods_id;
        data[i]['num'] = +ele.num;
        goodsId[i] = +ele.goods_id;
        delId[i] = +ele.id;
    });
    let res = await requestPost('/order', token, {
        addr_id: addrDefault.id,
        goods_info: data,
        project_id: 238,
        shoppingCartIds: goodsId,
    });
    delId.forEach(async ele => {
        let delRes = await requestDel(`/shoppingCart/${ele}`, token);
    });
    router.push('/order');
};
</script>

<style lang="scss" scoped>
.pay {
    background-color: #f1f1f1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    .addr_box {
        margin: 0.1rem auto;
    }
    .pay_msg {
        margin: 0.1rem auto;
    }
}
</style>
